<script lang="ts" setup>

</script>


<template>
    <h5 class="brand">Wotai</h5>
    <el-menu default-active="2" class="el-menu-vertical-demo" style="height: calc(100% - 50px);" router>
        <el-menu-item index="/home">
            <el-icon>
                <House />
            </el-icon>
            <span>Home</span>
        </el-menu-item>
        <el-menu-item index="/table">
            <el-icon>
                <Calendar />
            </el-icon>
            <span>Table</span>
        </el-menu-item>
        <el-menu-item index="/links">
            <el-icon>
                <Link />
            </el-icon>
            <span>Links</span>
        </el-menu-item>
    </el-menu>
</template>


<style lang="less" scoped>
.brand {
    border-right: 1px solid var(--el-menu-border-color);
    border-bottom: 1px solid var(--el-menu-border-color);
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    text-align: center;
    font-size: 20px;
    color: #79bbff;
}
</style>